<!--候选人信息-->
<template>
  <div>
    <div v-if="company_code === 'LM'">
      <Card style="float: left; width: 25%">
        <div class="treeView">
          <vxe-table
            border="inner"
            show-overflow
            row-id="id"
            ref="xTree"
            align="center"
            header-align="center"
            :data="data1"
            @toggle-tree-expand="toggleExpandChangeEvent"
            :tree-config="{children: 'children'}">
            <vxe-table-column field="title" title="机构名称" width="200" tree-node></vxe-table-column>
            <vxe-table-column field="date" title="操作">
              <template v-slot="{ row }">
                <Button type="primary" size="small" class="actionBtn" @click="imgALLData(row)">查看</Button>
              </template>
            </vxe-table-column>
          </vxe-table>
        </div>
      </Card>
      <div class="info">
        <Row class="search-info-style">
          <Col span="6">
            <span>选民姓名：</span>
            <Input v-model="searchInfo.name" placeholder="选民姓名" style="width:70%" />
          </Col>
          <Col span="6">
            <span>选举年份：</span>
            <DatePicker type="year" placeholder="选举年份" v-model="searchInfo.year" style="width:70%"></DatePicker>
          </Col>
          <Col style="float:right" pull="1">
            <Button class="new-btn-sty" @click="findtime()"><Icon type="ios-search" />搜索</Button>
          </Col>
        </Row>
        <Table border :columns="columns3" :data="data3">
          <template slot-scope="{ row }" slot="position">
            <span v-if="row.position === '1'">村（居）民委员会主任</span>
            <span v-if="row.position === '2'">村（居）民委员会副主任</span>
            <span v-if="row.position === '3'">村（居）民委员会主任委员</span>
            <span v-if="row.position === '4'">村（居）民委员会主任委员（妇女委员）</span>
          </template>
          <template slot-scope="{ row }" slot="state">
            <span v-if="row.state === '1'">当选</span>
            <span v-if="row.state === '2'">未当选</span>
            <span v-if="row.state === '0'">未出结果</span>
          </template>
          <template slot-scope="{ row }" slot="sex">
            <span v-if="row.sex == '1'">男</span>
            <span v-if="row.sex == '2'">女</span>
          </template>
          <template slot-scope="{ row }" slot="information">
            <span v-if="row.information == '0'">否</span>
            <span v-if="row.information == '1'">是</span>
          </template>
          <template slot-scope="{row}" slot="CPEI004">
            <span :value="item.TYPECODE" v-for="item in dictList[7]" v-bind:key="item.TYPECODE" v-if="row.CPEI004 == item.TYPECODE">{{item.TYPENAME}}</span>
          </template>
        </Table>
        <Row v-if="loadData == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>数据正在加载</div>
            </Spin>
          </Col>
        </Row>
        <Page class="page_style" :total="totalnum" :current="currentPageNo"
              :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
      </div>
    </div>
    <div v-if="company_code !== 'LM'">
      <div style="font-size: 1.1rem; font-weight: bold">
        <span>{{company_name}}第</span>
        <span style="margin: 10px"><DatePicker type="year" placeholder="选举年份" v-model="searchInfo.year"></DatePicker></span>
        <span>届选举</span>
        <span style="color: red">【候选人信息】</span>
      </div>
      <div>
        <Row class="search-info-style">
          <Col span="6">
            <span>选民姓名：</span>
            <Input v-model="searchInfo.name" placeholder="选民姓名" style="width:70%" />
          </Col>
          <Col style="float:right" pull="1">
            <Button class="new-btn-sty" @click="findtime()"><Icon type="ios-search" />搜索</Button>
            <Button class="new-btn-sty" @click="add()"><Icon type="md-browsers" />添加候选人</Button>
          </Col>
        </Row>
        <Table border :columns="columns3" :data="data3">
          <template slot-scope="{ row }" slot="position">
            <span v-if="row.position === '1'">村（居）民委员会主任</span>
            <span v-if="row.position === '2'">村（居）民委员会副主任</span>
            <span v-if="row.position === '3'">村（居）民委员会主任委员</span>
            <span v-if="row.position === '4'">村（居）民委员会主任委员（妇女委员）</span>
          </template>
          <template slot-scope="{ row }" slot="state">
            <span v-if="row.state === '1'">当选</span>
            <span v-if="row.state === '2'">未当选</span>
            <span v-if="row.state === '0'">未出结果</span>
          </template>
          <template slot-scope="{ row }" slot="sex">
            <span v-if="row.sex == '1'">男</span>
            <span v-if="row.sex == '2'">女</span>
          </template>
          <template slot-scope="{ row }" slot="information">
            <span v-if="row.information == '0'">否</span>
            <span v-if="row.information == '1'">是</span>
          </template>
          <template slot-scope="{row}" slot="CPEI004">
            <span :value="item.TYPECODE" v-for="item in dictList[7]" v-bind:key="item.TYPECODE" v-if="row.CPEI004 == item.TYPECODE">{{item.TYPENAME}}</span>
          </template>
        </Table>
        <Row v-if="loadData == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>数据正在加载</div>
            </Spin>
          </Col>
        </Row>
        <Page class="page_style" :total="totalnum" :current="currentPageNo"
              :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
      </div>
    </div>
    <Modal v-model="modalEdit" title="提示" width="700" cancel-text="关闭"
           @on-ok="modalEdit=false" @on-cancel="modalEdit=false" ok-text="确定">
      <div style="color: red; font-size: 3rem; text-align: center;">请选择选举年份</div>
    </Modal>
    <Modal v-model="modalEdit2" title="提示" width="700" cancel-text="关闭"
           @on-ok="ok222()" @on-cancel="modalEdit2=false" ok-text="确定">
      <div style="color: red; font-size: 3rem; text-align: center;">请先添加选举年份信息</div>
    </Modal>
    <Modal v-model="modalEdit3" title="添加候选人" width="700" cancel-text="关闭"
           @on-ok="ok333()" @on-cancel="modalEdit3=false" ok-text="确定">
      <Form :model="paramData" >
        <Row class="item1">
          <Col span="5" style="text-align: right" class="">候选职位:</Col>
          <Col span="12" offset="1">
            <Select v-model="paramData.position" placeholder="请选择职位">
              <Option value="1">村（居）民委员会主任</Option>
              <Option value="2">村（居）民委员会副主任</Option>
              <Option value="3">村（居）民委员会主任委员</Option>
              <Option value="4">村（居）民委员会主任委员（妇女委员）</Option>
            </Select>
          </Col>
        </Row>
        <Table border ref="selection" :columns="columns4" :data="data4" @on-selection-change="personSelection()">
          <template slot-scope="{ row }" slot="representative">
            <span v-if="row.representative == '0'">否</span>
            <span v-if="row.representative == '1'">是</span>
          </template>
        </Table>
        <Page class="page_style" :total="totalnum1" :current="currentPageNo1"
              :page-size="currentPageSize1" @on-change="changePageNo1" show-total  show-sizer @on-page-size-change="size1"/>
      </Form>
    </Modal>
    <Modal v-model="modalEdit4" title="再次确认" width="700" cancel-text="关闭"
           @on-ok="ok444()" @on-cancel="modalEdit4=false" ok-text="确定">
      <div style="color: red; font-size: 3rem; text-align: center;">{{message}}</div>
    </Modal>
    <Modal v-model="modalEdit5" title="编辑" width="700" cancel-text="关闭"
           @on-ok="ok555()" @on-cancel="modalEdit5=false" ok-text="确定">
      <Form :model="paramData" >
        <Row class="item1">
          <Col span="5" style="text-align: right" class="">候选职位:</Col>
          <Col span="12" offset="1">
            <Select v-model="paramData.position" placeholder="请选择职位">
              <Option value="1">村（居）民委员会主任</Option>
              <Option value="2">村（居）民委员会副主任</Option>
              <Option value="3">村（居）民委员会主任委员</Option>
              <Option value="4">村（居）民委员会主任委员（妇女委员）</Option>
            </Select>
          </Col>
        </Row>
      </Form>
    </Modal>
    <Modal v-model="modalEdit6" title="再次确认" width="700" cancel-text="关闭"
           @on-ok="ok666()" @on-cancel="modalEdit6=false" ok-text="确定">
      <div style="color: red; font-size: 3rem; text-align: center;">{{message}}</div>
    </Modal>
    <Modal v-model="modalEdit7" title="候选人信息" width="700" cancel-text="关闭"
           @on-ok="modalEdit7=false" @on-cancel="modalEdit7=false" ok-text="确定">
      <Form :model="paramData" >
        <Row class="item1">
          <Col span="5" style="text-align: right" class="">姓名:</Col>
          <Col span="12" offset="1">
            <Input disabled v-model="paramData.name"></Input>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5" style="text-align: right" class="">姓别:</Col>
          <Col span="12" offset="1">
            <Select disabled v-model="paramData.sex" placeholder="请选择性别">
              <Option value="1">男</Option>
              <Option value="2">女</Option>
            </Select>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5" style="text-align: right" class="">选民类型:</Col>
          <Col span="12" offset="1">
            <Select disabled v-model="paramData.type" placeholder="请选择选民类型">
            </Select>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5" style="text-align: right" class="">是否为选民代表:</Col>
          <Col span="12" offset="1">
            <Select disabled v-model="paramData.representative" placeholder="">
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5" style="text-align: right" class="">候选职位:</Col>
          <Col span="12" offset="1">
            <Select disabled v-model="paramData.position" placeholder="请选择职位">
              <Option value="1">村（居）民委员会主任</Option>
              <Option value="2">村（居）民委员会副主任</Option>
              <Option value="3">村（居）民委员会主任委员</Option>
              <Option value="4">村（居）民委员会主任委员（妇女委员）</Option>
            </Select>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5" style="text-align: right" class="">学历:</Col>
          <Col span="12" offset="1">
            <Select disabled v-model="paramData.CPEI004" filterable transfer="">
              <Option :value="item.TYPECODE" v-for="item in dictList[7]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
            </Select>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5" style="text-align: right" class="">信息是否补全:</Col>
          <Col span="12" offset="1">
            <Select disabled v-model="paramData.information" placeholder="">
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>
<script>
import { findCommunityList, getElection, date2str, getVoterList, saveCandidate, getTypeNameList, getCandidateList, updateCandidate, deleteCandidate, updateCandidate2 } from '@/api/eventlist'
export default {
  data () {
    return {
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      currentPageNo1: 1,
      currentPageSize1: 10,
      totalnum1: 0,
      message: '',
      code: '',
      company_name: this.$store.state.user.severUserInfo.company_name,
      company_code: this.$store.state.user.severUserInfo.company_code,
      loadData: true,
      modalEdit: false,
      modalEdit2: false,
      modalEdit3: false,
      modalEdit4: false,
      modalEdit5: false,
      modalEdit6: false,
      modalEdit7: false,
      param: {},
      searchInfo: {},
      paramData: { personSelectionList: [] },
      dictList: [],
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      columns2: [],
      columns3: [
        { title: '序号', type: 'index', width: 80, align: 'center' },
        { title: '姓名', key: 'name', width: 150, align: 'center' },
        { title: '性别', slot: 'sex', width: 150, align: 'center' },
        { title: '候选职位', slot: 'position', width: 200, align: 'center' },
        { title: '学历', slot: 'CPEI004', width: 100, align: 'center' },
        { title: '信息是否补全', slot: 'information', width: 100, align: 'center' },
        { title: '公示阶段', key: 'representative', width: 200, align: 'center' },
        { title: '状态', slot: 'state', width: 100, align: 'center' },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          className: 'nopadding',
          minWidth: 200,
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'error', size: 'small' },
                style: { marginRight: '5px', backgroundColor: '#18B0FF', borderColor: '#18B0FF' },
                on: {
                  click: () => {
                    this.downLoad(params.row)
                  }
                }
              }, '查看')
            )
            if (params.row.company_code == this.company_code) {
              if (params.row.state === '0') {
                temp.push(
                  h('Button', {
                    props: { type: 'primary', size: 'small' },
                    style: { marginRight: '5px', backgroundColor: '#598ED1', borderColor: '#598ED1' },
                    on: {
                      click: () => {
                        this.viewProcess(params.row)
                      }
                    }
                  }, '编辑'),
                  h('Button', {
                    props: { type: 'info', size: 'small' },
                    style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                    on: {
                      click: () => {
                        this.election(params.row)
                      }
                    }
                  }, '当选')
                )
              }
              temp.push(
                h('Button', {
                  props: { type: 'error', size: 'small' },
                  style: { marginRight: '5px' },
                  on: {
                    click: () => {
                      this.remove(params.row)
                    }
                  }
                }, '删除')
              )
            }
            return h('div', temp)
          }
        }
      ],
      columns4: [
        { type: 'selection',  width: 60, align: 'center' },
        { title: '序号', type: 'index', width: 80, align: 'center' },
        { title: '姓名', key: 'name', width: 300, align: 'center' },
        // { title: '性别', slot: 'sex', width: 200, align: 'center' },
        // { title: '选民类型', slot: 'type', width: 300, align: 'center' },
        { title: '是否选民代表', slot: 'representative', width: 250, align: 'center' }
      ]
    }
  },
  methods: {
    init() {
      let params = {
        company_code: this.company_code
      }
      findCommunityList(params).then(res => {
        if (res.data.errcode === 0){
          this.data1 = res.data.data
        }
      })
    },
    downLoad(item) {
      this.paramData = item
      this.modalEdit7 = true
    },
    imgALLData(item) {
      this.code = item.CPSR001
      this.getCandidateList()
    },
    add(){
      if (!this.searchInfo.year) {
        this.modalEdit = true
      } else {
        this.searchInfo.year = date2str(this.searchInfo.year)
        getElection(this.searchInfo).then(res => {
          if (res.data.errcode === 0) {
            this.paramData = {}
            this.modalEdit3 = true
            this.getVoterList()
            this.paramData.year = this.searchInfo.year
            this.paramData.pid = res.data.data.pid
          } else {
            this.modalEdit2 = true
          }
        })
      }
    },
    getVoterList() {
      let params = {
        pageSize: this.currentPageSize1,
        pageNo: this.currentPageNo1,
        year: date2str(this.searchInfo.year),
      }
      getVoterList(params).then(res => {
        if (res.data.errcode === 0) {
          this.data4 = res.data.data.results
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({ title: '查询失败！请重试', desc: res.data.errmsg })
          this.loadData = false
        }
      })
    },
    getCandidateList() {
      let params = {
        pageSize: this.currentPageSize1,
        pageNo: this.currentPageNo1,
        name: this.searchInfo.name,
        year: date2str(this.searchInfo.year),
        code: this.code
      }
      getCandidateList(params).then(res => {
        if (res.data.errcode === 0) {
          this.loadData = false
          this.data3 = res.data.data.results
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({ title: '获取列表失败！请重试', desc: res.data.errmsg })
          this.loadData = false
        }
      })
    },
    viewProcess(item) {
      this.modalEdit5 = true
      let param = this.$common.xeUtils.clone(item,true)
      this.paramData = param
    },
    personSelection () {
      this.paramData.personSelectionList = this.$refs.selection.getSelection()
    },
    remove(item) {
      this.modalEdit4 = true
      this.param = item
      this.message = '确定删除“' + item.name + '”候选人吗！'
    },
    election(item) {
      this.modalEdit6 = true
      this.param = item
      let position_name = ''
      if (item.position === '1') {
        position_name = '村（居）民委员会主任'
      } else if (item.position === '2') {
        position_name = '村（居）民委员会副主任'
      } else if (item.position === '3') {
        position_name = '村（居）民委员会主任委员'
      } else if (item.position === '4') {
        position_name = '村（居）民委员会主任委员（妇女委员）'
      }
      this.message = '确定“' + item.name + '”当选“' + position_name + '”'
    },
    ok222() {
      this.$router.push({
        name: 'election-management'
      })
    },
    ok333() {
      saveCandidate(this.paramData).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功', desc: '' })
          this.getCandidateList()
          this.paramData = {}
        } else {
          this.$Notice.error({ title: '保存失败！请选择该职位候选人！', desc: res.data.errmsg })
          this.getCandidateList()
        }
      })
    },
    ok444() {
      deleteCandidate(this.param).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '删除成功', desc: '' })
          this.getCandidateList()
        } else {
          this.$Notice.error({ title: '删除失败！请重试', desc: res.data.errmsg })
          this.getCandidateList()
        }
      })
    },
    ok555() {
      updateCandidate(this.paramData).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功', desc: '' })
          this.getCandidateList()
          this.paramData = {}
        } else {
          this.$Notice.error({ title: '保存失败！请重试', desc: res.data.errmsg })
          this.getCandidateList()
        }
      })
    },
    ok666() {
      updateCandidate2(this.param).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '成功', desc: '' })
          this.getCandidateList()
        } else {
          this.$Notice.error({ title: '失败！请重试', desc: res.data.errmsg })
          this.getCandidateList()
        }
      })
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status);
    },
    toggleExpandChangeEvent ({ row, expanded }) {
      console.log('节点展开事件' + expanded)
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.currentPageNo = pageNo
      this.init(this.param)
    },
    size1 (pageSize) {
      this.currentPageSize1 = pageSize
      this.changePageNo1()
    },
    changePageNo1 (pageNo) {
      this.currentPageNo1 = pageNo
      this.getVoterList()
    },
    getTypeName (id, index) {
      getTypeNameList({ typegroupcode: id }).then(res => {
        if (res.data.errcode === 0) {
          this.dictList[index] = res.data.data
        } else {
          this.$Notice.error({
            title: '获取字典列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getDictList () {
      this.getTypeName('degree', 7)
    },
    findtime() {
      this.getCandidateList()
    }
  },
  mounted() {
    this.init()
    this.getDictList()
    this.getCandidateList()
  }
}
</script>
<style>
  .treeView {
    width: 100%;
    border-radius: 5px;
  }
  .info {
    width: 74%;
    border-radius: 5px;
    float: left;
    margin-left: 1%;
  }
  .search-info-style {
    margin: 10px;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
</style>
